<template>
  <div class="side-bar">
    <el-menu
        default-active="1" class="full-menu">
      <router-link to="/goodsManage">
        <el-menu-item index="3">
          <el-icon>
            <Menu/>
          </el-icon>
          <span>商品管理</span>
        </el-menu-item>
      </router-link>
      <router-link to="/userManage">
        <el-menu-item index="4">
          <el-icon>
            <User/>
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
      </router-link>
      <el-menu-item index="5" @click="logout">
        <el-icon>
          <Switch/>
        </el-icon>
        <span>登出</span>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="main-container">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  methods: {
    logout() {
      localStorage.clear()
      window.location.reload()
    }
  }
}
</script>
<script setup>
import {
  Menu,
  User,
  Switch
} from '@element-plus/icons-vue'
</script>

<style scoped>
.side-bar {
  width: 240px;
  position: fixed;
  height: 100%;
  top: 0;
  bottom: 0;
}

.full-menu {
  height: 100%;
}

.main-container {
  min-height: 100%;
  transition: margin-left .28s;
  margin-left: 240px;
  position: relative;
  padding-left: 5px;
}

a {
  text-decoration: none;
}
</style>
